<!-- 首页 -->
<template>
  <div class="home">
    <div class="home-list-box">
      <h2 class="page_title">基础组件</h2>
      <ul class="home-list-content">
        <li
          class="item_btn"
          v-for="(item,index) in list"
          :key="index"
          @click="goPage(item.url)"
        >
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      list: [
        {
          name: 'template-ui-tips 提示',
          url: 'templateTips'
        },
        {
          name: 'template-ui-head 头部导航',
          url: 'templateHead'
        }
      ]
    }
  },
  methods: {
    goPage (url) {
      this.$router.push(`/${url}`)
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.home-list-box {
  padding: 20px;
  box-sizing: border-box;
  .page_title {
    padding-left: 20px;
    color: rgba(69, 90, 100, 0.6);
    font-size: 14px;
  }
  .home-list-content {
    .item_btn {
      position: relative;
      text-align: left;
      font-weight: bold;
      border-radius: 20px;
      padding: 0 20px;
      color: #323233;
      background-color: #f7f8fa;
      margin-top: 10px;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      &::before {
        content: "";
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -5px;
        width: 7px;
        height: 7px;
        border-top: 2px solid rgb(182, 195, 210);
        border-right: 2px solid rgb(182, 195, 210);
        transform: rotate(45deg);
      }

      &::after {
        border: none;
      }
    }
  }
}
</style> 